[Tailwind] 환경 구축]

TailwindCSS 환경 설정

• 공식 사이트 문서 : https://tailwindcss.com/docs/installation/using-vite

1단계 TailwindCSS 라이브러리 설치

npm install tailwindcss @tailwindcss/vite

2단계 vite 설정 파일에 추가하기

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
 
// https://vite.dev/config
export default defineConfig({
	plugins: [
		react(),
		tailwindcss(),
	],
})

3단계 전역 설정 파일에 추가하기

@import "tailwindcss";

index.css 파일은 main.tsx 파일에서 참고하고 있는 전역 css 파일입니다. 이 경우 main.tsx 파일이 다른 모든 .tsx 파일들의 전역 파일이므로 모든 파일들에서 tailwindcss를 사용할 수 있도록 설정됩니다.

4단계 실행 테스트

import './App.css'
 
function App() {
	return <div className='font-bold underline text-2xl'>Hello World</div>;
}
 
export default App

App.tsx 파일은 현재 main.tsx에서 불러오고 있으므로 import를 따로 하지 않더라도 tailwindcss를 사용할 수 있습니다.